<template>
  <div>
    <!-- 顶部布局 -->
    <NuxtLayout
      name="top-tool"
      icon="ri-article-line"
      title="文章"
    >
      <template #center>
        <div></div>
      </template>
    </NuxtLayout>
    <ElEmpty
      v-if="!isLoadComplete"
      description="文章丢失..."
      style="height: calc(100vh - 40px)"
    ></ElEmpty>
    <!-- 主要容器 分为左右两部分 左侧是作者什么的信息 右侧是文章内容什么的 -->
    <div
      v-if="isLoadComplete"
      class="main-box"
    >
      <!-- 这个容器主要负责展示各种信息 -->
      <div
        class="left hidden sm:block"
        :style="{ height: `${rightBoxHeight + 16}px` }"
      >
        <div class="w-h-full flex flex-col gap-4 p-2">
          <!-- 内容 -->
          <div
            class="w-full p-2 uni-shadow secondly-color"
            ref="userInfoCardBox"
          >
            <BlogUserInfoCard
              v-if="authorProfile != null"
              :name="authorProfile.nickName"
              :url="authorProfile.avatarUrl"
              :signature="authorProfile.signature"
            ></BlogUserInfoCard>
            <ElEmpty
              v-else
              style="height: 250px"
              description="用户信息丢失..."
            ></ElEmpty>
          </div>
          <!-- <div
            class="w-full p-2 uni-shadow secondly-color sticky top-12"
            v-if="articleDocument != null && articleDocument.content != null"
          >
            <div class="text-center font-bold text-base">目录</div>
            <MdCatalog
              :editorId="previewId"
              scroll-element="#body"
            />
          </div> -->
        </div>
      </div>
      <!-- 这个容器主要负责展示文章内容 -->
      <div
        class="right p-2 overflow-hidden"
        ref="rightRef"
      >
        <div
          class="w-full uni-shadow relative"
          :style="{ height: `${authorInfoCardBoxHeight + 16}px` }"
        >
          <!-- 背景层 -->
          <UniCosImage
            class="w-h-full"
            :src="articleDocument?.pictureUrl ?? API.DEFAULT_COS_IMAGE_URL"
            :format="CosImgFormatSuffix.WEBP"
          ></UniCosImage>
          <!-- 蒙版层 -->
          <!-- <div
            id="title-bg"
            class="w-h-full absolute top-0 left-0 z-10"
          ></div> -->
          <!-- 标题层 -->
          <div
            class="w-h-full absolute top-0 flex justify-center items-center z-20"
          >
            <div
              class="text-2xl"
              id="title"
            >
              {{ `${articleDocument?.title ?? "DEFAULT TITLE..."}` }}
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="w-h-full uni-shadow secondly-color p-4">
          <!-- <MdEditor></MdEditor> -->

          <ElEmpty
            v-if="articleDocument == null || articleDocument.content == ''"
            description="缺失文章..."
          ></ElEmpty>
          <ClientOnly v-else>
            <MdPreview
              :id="previewId"
              :theme="previewTheme"
              preview-theme="smart-blue"
              :modelValue="articleDocument.content ?? ''"
            />
            <!-- <MDC
              :value="articleDocument.content ?? ''"
              tag="article"
            ></MDC> -->
          </ClientOnly>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import "md-editor-v3/lib/style.css";
import "md-editor-v3/lib/preview.css";
// import "@vavt/cm-extension/dist/previewTheme/arknights.css";
definePageMeta({ layout: false });
import type { ResponseMsg, DataArrResponse } from "~/models/universal";
import { ArticleQueryMode, type ArticleResponse } from "~/models/article";
import type { UserProfileResponse } from "~/models/user";
import { MdCatalog, MdPreview } from "md-editor-v3";
import type { Themes } from "md-editor-v3";
import { API } from "~/models/api";
import { CosImgFormatSuffix } from "~/models/cos";

const route = useRoute();
const isDark = useDark();

const userInfoCardBox = ref(null);
const id = route.params.id;
const isLoadComplete = ref(false);
const articleDocument = ref<ArticleResponse>();
const authorProfile = ref<UserProfileResponse>();
const previewId = ref("preview-only");
const previewTheme = ref<Themes>(isDark.value ? "dark" : "light");
const authorInfoCardBoxSize = useElementSize(userInfoCardBox);
const authorInfoCardBoxHeight = computed(() =>
  Math.max(authorInfoCardBoxSize.height.value, 200)
);
const rightRef = ref(null);
const rightRefSize = useElementSize(rightRef);
const rightBoxHeight = computed(() => Math.max(rightRefSize.height.value, 200));
// 监听日夜变化
watch(isDark, (newVal) => {
  if (isDark.value) previewTheme.value = "dark";
  else previewTheme.value = "light";
});

const articleResponse = await useFetch<ResponseMsg<ArticleResponse>>(
  "/api/article/queryDetail",
  {
    method: "post",
    body: {
      mode: "",
      args: {
        payload: id.toString(),
      },
    },
  }
);

// console.log(articleResponse.data.value?.status);

(async () => {
  // if (articleDocument.value == null) return;
  if (articleResponse.data.value == null) return;
  if (!articleResponse.data.value?.status) return;
  isLoadComplete.value = true;
  articleDocument.value = articleResponse.data.value?.data;

  let userArrResponse = await useFetch<
    ResponseMsg<DataArrResponse<UserProfileResponse>>
  >("/api/user/queryUserProfile", {
    method: "post",
    body: {
      mode: "SingleId",
      args: {
        payload: articleDocument.value.userId,
      },
    },
  });

  if (userArrResponse.data.value == null) {
    createSimpleElNotification(false, "查询失败...");
    return;
  }

  if (!userArrResponse.data.value.status) return;
  if (userArrResponse.data.value.data.total < 1) return;
  authorProfile.value = userArrResponse.data.value.data.rows[0];
})();
</script>

<style lang="scss" scoped>
.main-box {
  margin: auto;
  padding-left: 2vmin;
  padding-right: 2vmin;
  border-radius: 1vmin;
  width: clamp(640px, 80vw, 1200px);
  height: 100vh;
  display: flex;
  & > .left {
    flex: 1.5;
    max-width: 250px;
  }
  & > .right {
    height: fit-content;
    flex: 3;
  }
}

#title-bg {
  background: var(--bg-secondly-10);
  // filter: blur(1px);
  backdrop-filter: blur(1px);
}

#title {
  text-shadow: 0 0 10px var(--color-10), 0 0 20px var(--color-10),
    0 0 30px var(--color-10), 0 0 40px var(--color-10);
  // color: var(--color-secondly);
}
</style>
